<template>
  <div class="userManagement">
    <Card  style="margin-top: 25px">
      <Table :data="usersData" :columns="usersColumns" stripe ref="usersData"></Table>
      <Button type="primary" @click="usersExCsv" style="float: left">导出数据</Button>
      <Page :total="total" show-elevator style="margin-top: 10px" @on-change="changePage"/>
    </Card>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "userManagement",
    data(){
      return{
        lookShow:false,
        usersData:[],
        usersColumns:[
          {
            title: '用户id',
            key: 'id',
          },
          {
            title: '用户账号',
            key: 'userName'
          },
          {
            title: '用户昵称',
            key: 'unick',
          },
          {
            title: '用户签名',
            key: 'userInt'
          },
          {
            title: '用户权限',
            key: 'uadmin',
            render:(h,params) =>{
              return h('Input',{
                props:{
                  type:'text',
                  value:params.row.uadmin,
                },
                on: {
                  'on-change':(event) => {
                    params.row.uadmin = event.currentTarget.value;
                  }
                }
              },params.row.uadmin)


            }
          },
          {
            title: 'Action',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.userFrom.id = params.row.id
                      this.userFrom.uAdmin = params.row.uadmin
                      this.updateAdmin();
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '确认删除',
                        content: '您确定删除所点击的数据?',
                        onOk: () => {
                          //    删除
                        },
                        onCancel: () => {
                          this.$Message.info("取消了当前操作")
                        }
                      })
                    }
                  }
                }, '删除')
              ]);
            }
          }
          ],
        total:0,
        usersForm:{
          pageNumber:1,
          pageSize:5,
          startTime:null,
          endTime:null,
        },
        userFrom:{
          id:'',
          uAdmin: "",
          uNick: "",
          userInt: null,
          userName: "",
          vipTime: null
        }
      }
    },
    methods:{
      updateAdmin(){
        axios.get("http://localhost:8888/updateAdmin",{params:this.userFrom}).then(res =>{
          if (res){
            this.$Message.success("修改权限成功")
          }else{
            this.$Message.error("修改权限失败")
          }
        })
      },
      changePage(v){
        this.usersForm.pageNumber = v
        this.getData()
      },
      getData(){
        axios.get("http://localhost:8888/getAll",{params:this.usersForm}).then(res =>{
          this.usersData = res.data.list
          this.total = res.data.total
          // console.log(res.data)
        })
      },
      usersExCsv(){
        this.$refs.usersData.exportCsv({
          filename: '用户信息',
          columns: this.usersColumns.filter((col, index) => index < 5),
          data: this.usersData.filter((data, index) => index < 5)
        });
      }

    },
    mounted() {
      this.getData()
    }
  }
</script>

<style scoped>
  .userManagement{
    margin:20px 0 0 20px
  }
</style>
